<template>
    <div class="m-menu">
        <dl @mouseleave="mouseLeave" class="nav">
            <dt>全部分类</dt>
            <dd @mouseenter="mouseEnter" v-for="(item,index) in $store.state.home.menu" :key="index">
                <i :class="item.type" />
                    {{item.name}}
                <span class="arrow" />
            </dd>
        </dl>
        <div @mouseleave="Leave" @mouseenter="Enter" class="detail" v-if="kind" >
           <span class="more">更多</span>
           <span class="arrow"/>
           <template v-for="(item,idx) in curdetail.child">
               <h4 :key="idx">{{ item.title }}</h4>
               <span
                   v-for="v in item.child"
                   :key="v">{{ v }}
               </span>
           </template>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            kind: '',
            // menu: [{
            //     type: 'food',
            //     name: '美食',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },{
            //     type: 'takeout',
            //     name: '外卖',
            //     child: [{
            //         title: '住宿',
            //         child: ['旅店','民宿','高档酒店']
            //     }]
            // },
            // {
            //     type: 'hotel',
            //     name: '酒店',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'homestay',
            //     name: '榛果民宿',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'movie',
            //     name: '猫眼电影',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'airport',
            //     name: '机票/火车票',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'ktv',
            //     name: '休闲娱乐/KTV',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'life',
            //     name: '生活服务',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'hair',
            //     name: '丽人/美发/医学美容',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'marry',
            //     name: '结婚/婚纱摄影/婚宴',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },{
            //     type: 'offspring',
            //     name: '亲子/儿童乐园/幼教',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'sport',
            //     name: '运动健身/健身中心',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'furniture',
            //     name: '家装/建材/家居',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'study',
            //     name: '学习培训/音乐培训',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'health',
            //     name: '医疗健康/宠物/爱车',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // },
            // {
            //     type: 'bar',
            //     name: '酒吧/密室逃脱',
            //     child: [{
            //         title: '美食',
            //         child: ['代金券','甜点饮品','火锅','自助菜','小吃快餐']
            //     }]
            // }]
        }
    },
    // mounted() {
    //     console.log($store.state.home.menu)
    // },
    computed: {
        curdetail:function() {
            // console.log(this.menu.filter(item => item.type === this.kind)[0])
            return this.$store.state.home.menu.filter(item => item.type === this.kind)[0]
        }
    },
    methods: {
        mouseLeave() {
           let self = this;
           self._timer=setTimeout(function(){
           self.kind=''
           },150)
        },
        mouseEnter(e) {
            this.kind = e.target.querySelector('i').className
        },
        Enter() {
            clearTimeout(this._timer)
        },
        Leave() {
            let _this = this
            setTimeout(() => {
                _this.kind = ''
            },150)  
        }
    }
}
</script>

<style lang="scss">
    .m-menu {
        width: 230px;
        height: 475px;
        margin-top: -50px;
        margin-left: 20px;
        color: #fff;
        position: relative;
        background: linear-gradient(-180deg, rgba(2, 181, 157, .85) 2%, rgba(22, 146, 183, .85) 100%);
        dt {
            height: 50px;
            padding-top: 15px;
            font-size: 16px;
            margin-left: 15px;
            box-sizing: border-box;
            font-weight: 400;
        }
        dd {
            position: relative;
            height: 26px;
            font-size: 13px;
            box-sizing: border-box;
            padding: 2px 12px;
            cursor: pointer;
            &:hover {
                background: rgba(255, 255, 255, .2);
            }
            &>i {
                opacity: 1;
            }
        }
        .nav {
            dd>i {
                font-family: 'meituan';
                font-size: 14px;
                font-style: normal;
                opacity: 0.3;
                margin-right: 11px;
                margin-left: -2px;
                &:before {
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                }
            }
            .food {
               &:before {
                   content: "\e622";
               }
            }
            .takeout {
               &:before {
                   content: "\e630";
               }
            }
            .hotel {
               &:before {
                   content: "\e62a";
               }
            }
            .homestay {
               &:before {
                   content: "\e631";
               }
            }
            .movie {
               &:before {
                   content: "\e62c";
                   position: relative;
                   left: -2px;
               }
            }
            .airport {
               &:before {
                   content: "\e632";
               }
            }
            .ktv {
               &:before {
                   content: "\e627";
               }
            }
            .life {
               &:before {
                   content: "\e633";
               }
            }
            .hair {
               &:before {
                   content: "\e626";
                   transform: scale(0.7);
               }
            }
            .marry {
               &:before {
                   content: "\e629";
               }
            }
            .offspring {
               &:before {
                   content: "\e623";
               }
            }
            .sport {
               &:before {
                   content: "\e62b";
               }
            }
            .furniture {
               &:before {
                   content: "\e625";
               }
            }
            .study {
               &:before {
                   content: "\e624";
               }
            }
            .health {
               &:before {
                   content: "\e628";
               }
            }
            .bar {
               &:before {
                   content: "\e621";
               }
            }
            .arrow {
                width: 4px;
                height: 4px;
                border-bottom: 1px solid #fff;
                border-right: 1px solid #fff;
                display: block;
                top: 10px;
                bottom: 0;
                right: 13px;
                position: absolute;
                transform: rotate(-45deg);
            }
        }
       
        .detail {
            padding: 0 30px;
            position: absolute;
            left: 230px;
            bottom: 10px;
            width: 400px;
            height: 416px;
            background: #fff;
            z-index: 9999;
            .more {
                position: absolute;
                display: inline-block;
                color: #aaa;
                top: 20px;
                font-size: 13px;
                left: 400px;
            }
            .arrow {
                width: 4px;
                height: 4px;
                display: block;
                border-bottom: 1px solid #aaa;
                border-right: 1px solid #aaa;
                position: absolute;
                top: 25px;
                left: 426px;
                transform: rotate(-45deg);
            }
            h4 {
                margin-top: 24px;
                height: 22px;
                line-height: 22px;
                padding-bottom: 10px;
                border-bottom: 1px solid #e5e5e5;
                color: #222;
            }
            span {
                color: #999;
                font-size: 12px;
                display: inline-block;
                line-height: 15px;
                margin-top: 10px;
                margin-right: 16px;
                cursor: pointer;
                &:hover {
                    color: #31BBAC;
                }
            }
        }
    }
</style>


